<template>
	<div class="hot">
		<h2>最受关注的书籍</h2>
		<ul class="hot__list" v-loading="loading">
			<li v-for="item in hotBooks" class="hot__list-wrap">
				<router-link to="/goods_detail" class="hot__list-wrap--img" >
					<img :src="item.img" alt="" />
				</router-link>
				<div class="hot__list-wrap--name">{{item.name}}</div>
				<div class="hot__list-wrap--price" >¥&nbsp;{{item.price}}</div>
			</li>
		</ul>
	</div>
</template>

<script>
	import { fetchHotBooks } from "../../../../api/api.js"
	export default {
		created() {
			this.getHotBooks();
		},
		data() {
			return {
				hotBooks: null,
				loading: true
			}
		},
		methods: {
			getHotBooks() {
				fetchHotBooks().then( res => {
					this.loading = false;
					this.hotBooks = res.data.result;
				} ).catch( err => {
					alert(err);
					console.log(err)
				} );
			}
		}
	}
</script>

<style scoped lang="scss">
	.hot {
		@include index_title;
	}
	.hot__list {
		display: flex;
		overflow-x: auto;
		height: rem(140);
		margin: $com-padding-lr-base $com-padding-lr-lg;
	}
	.hot__list-wrap {
		flex: 0 0 rem(75);
		height: rem(140);
		font-size: $font-sm;
		margin-right: 2rem;
		display: flex;
		flex-direction: column;
	}
	.hot__list-wrap--img {
		width: rem(75);
		height: rem(100);
		img {
			width: 100%;
			height: 100%;
		}
	}
	.hot__list-wrap--name {
		
	}
	.hot__list-wrap--price {
		color: $color-money;
	}
	
</style>